<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>日期时间</title>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.lightblue.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    
    <script type="text/javascript">
        var HISUIStyleCode = 'lightblue';
    </script>
</head>
<body>
	<style>
		.demo-exp-code td{padding:5px 0;}
		.demo-exp-code td.r-label{padding-right: 10px;}
	</style>
	<h2>快速日期时间框</h2>
	<h3>说明:</h3>
	<span>快速日期时间框（datetimeboxq）继承自dateboxq组件，在初始化时不初始化日历，按钮实现方式不再一样，在IE8或IE11下速度大大提高。</span>
	<h3>如：</h3>
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint html-lang">
			<table>
					<tr>
						<td class='r-label'>结算时间</td>
						<td>
							<input id='dtbq1' style="width:170px" data-options="showSeconds:false,onHidePanel:function(){alert('onHidePanel');}" class="hisui-datetimeboxq"/>
						</td>
					</tr>
					<tr>
						<td class='r-label'>申请时间</td>
						<td>
							<input id='dtbq2' style="width:170px" />
						</td>
					</tr>
			</table>
			<div style="margin:10px 0">
				<span>Selected Date: </span>
				<span id="result"></span>
			</div>
		</div>
		<script type='text/javascript' class="use-prettyprint">
			function onSelect(date){
				$('#result').text(date)
			}
			$.parser.onComplete = function(){
				$('#dtbq1').datetimeboxq('calendar').calendar({
					validator:function(date){
						var now = new Date();
						return date<=now;
					}
				});
				
				var min = $.fn.datebox.defaults.formatter($.fn.datebox.defaults.parser('t'));
				var max = $.fn.datebox.defaults.formatter($.fn.datebox.defaults.parser('t+7'));
				
				$('#dtbq2').datetimeboxq({
					onSelect:onSelect,
					// value:min+' 11:11:11',
					minDate:min,
					maxDate:max
				});
				$('#dtbq2').datetimeboxq('setValue',"2023-11-16 09:10:10");
			};
		</script>
	</div>
	
<table class="table">
	<tr class="protitle">
		<th>属性</th>
		<th>说明</th>
		<th>默认值</th>
		<th></th>
	</tr>
	<tr>
		<td>showSeconds</td>
		<td>是否显示到秒</td>
		<td>true</td>
		<td></td>
	</tr>
	<tr>
		<td>minDate</td>
		<td>可选最小日期。如:2019-11-25</td>
		<td>默认null</td>
		<td></td>
	</tr>
	<tr>
		<td>maxDate</td>
		<td>可选最大日期。如:2019-11-25</td>
		<td>默认null</td>
		<td></td>
	</tr>
	<tr>
		<td>options</td>
		<td>获得配置项目</td>
		<td>默认null</td>
		<td></td>
	</tr>
	<tr class="mthtitle">
		<th>方法</th>
		<th>说明</th>
		<th>默认值</th>
		<th></th>
	</tr>
	<tr>
		<td>setValue</td>
		<td>设置日期时间</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>getValue</td>
		<td>获得日期时间</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>setDisabled</td>
		<td>禁用日期框.false表示启用，true表示禁用</td>
		<td></td>
		<td></td>
	</tr>
	<tr class="evttitle">
		<th>事件</th>
		<th>说明</th>
		<th>默认值</th>
		<th></th>
	</tr>
	<tr>
		<td>onHidePanel</td>
		<td>隐藏面板时</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>onSelect</td>
		<td>选中日期时</td>
		<td>date</td>
		<td></td>
	</tr>
</table>
<prettyprint/>
</body>
</html>